<template>
  <div class="home-box" ref="box">
    <topBar>
      <template #title>
        <div class="top-search">
          <van-icon class-prefix="toutiao-sousuo toutiao" name="extra" /> 搜索
        </div>
      </template>
    </topBar>
    <div class="main">
      <van-tabs
        swipeable
        animated
        sticky
        v-model="activeId"
        @rendered="activeChange"
        lazy-render
      >
        <van-tab v-for="item in channelsList" :title="item.name" :key="item.id">
          <div class="content">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                offset="0"
              >
                <div v-for="(item1, index) in articlesContent" :key="index">
                  <ConTent :result="item1" ></ConTent>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
      <div class="right-menu">
        <van-icon class-prefix="toutiao toutiao-gengduo" />
      </div>
    </div>
  </div>
</template>

<script>
import { getChannels, getArticles } from '@/api/home'
import ConTent from './components/ConTent'

export default {
  name: '',
  components: {
    ConTent,
  },
  props: {},
  data() {
    return {
      activeId: '',
      channelsList: [],
      articlesContent: [],
      isLoading: false,
      loading: false,
      finished: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.channelsData()
    // this.articlesData()
    // window.scrollTo({
    //   top: -45,
    //   left: 0,
    //   behavior: 'smooth',
    // })
  },
  mounted() {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0

    // window.pageYOffset = 0
  },
  methods: {
    // 获取标签列表
    async channelsData() {
      const {
        data: {
          data: { channels },
        },
      } = await getChannels()
      this.activeId = channels[0].id
      this.channelsList = channels
    },
    // 获取标签对应的数据
    async articlesData() {
      const params = {
        channel_id: this.activeId,
        with_top: 1,
        timestamp: +new Date(),
      }
      const {
        data: { data },
      } = await getArticles(params)
      // console.log(data)
      this.articlesContent = [...this.articlesContent, ...data.results]
    },
    // 当标签首次被选择时
    async activeChange(id, title) {
      this.activeId = id
      this.articlesData()
    },
    // 下拉刷新
    async onRefresh() {
      this.isLoading = true
      this.articlesContent = []
      await this.articlesData()
      this.isLoading = false
    },
    // 触底加载
    async onLoad() {
      await this.articlesData()
      this.loading = false
    },
  },
}
</script>

<style scoped lang="less">
// .home-box {
//   padding-bottom: 50px;
// }
::v-deep .van-nav-bar__title {
  width: 265px !important;
  margin: 0 auto !important;
  max-width: 265px !important;
  margin-bottom: 87px;
}
.top-search {
  width: 265px;
  height: 30px;
  line-height: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  .toutiao {
    font-size: 16px;
  }
}
.content {
  width: 100vw;
  margin-top: 87px;
  margin-bottom: 50px;
}

::v-deep .van-tabs__wrap--scrollable .van-tabs__nav {
  margin: 0;
  height: 42px;
  background-color: #fff;
}
::v-deep .van-sticky {
  position: fixed;
  top: 45px;
  width: 100vw;
  z-index: 999;
  background-color: #fff;
}
::v-deep .van-tab {
  width: 100px;
  border: 1px solid #eee;
  border-left: none;
  // background-color: pink !important;
}
.main {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  top: 0px;
}
.right-menu {
  padding-right: 5px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: fixed;
  right: 0;
  top: 47px;
  z-index: 9999;
  background-color: #fff;
  .toutiao-gengduo {
    font-size: 20px;
  }
}
.topBar {
  position: fixed;
  top: 0;
  width: 100vw;
}
</style>
